<template>
	<view class="content">
		<view class="userBox">
			<!-- 最顶部的背景图片 -->
			<image :src="baseUrl+levelArr[levelIndex].bg" class="levelBg" />
			</image>
			<view class="userInfoBox">
				<router-link to="/bundle/pages/user_profile/user_profile">
					<image :src="userInfo.avatar" class="avatar" />
				</router-link>
				<text class="name" :class="levelIndex==4?'white':''">{{userInfo.nickname}}</text>
				<text class="mobile" :class="levelIndex==4?'white':''">{{userInfo.mobile}}</text>
				<view class="centerBox" @click="$navto.navto('/user/user_center/user_center')">
					会员中心>
				</view>
				<image :src="baseUrl+'scan.png'" class="scan" @click="scan()" v-if="userInfo.user_role==1"></image>
			</view>
			<!-- 等级轮播 -->
			<swiper class="swiperBox" next-margin="10px" @change=changeSwiper :current='levelIndex'>
				<swiper-item class="swiper-item" v-for="(item,index) in levelArr" :key="index">
					<image :src="baseUrl+item.levelbg" class="itemImg" />
					<view class="nowLevelBox" v-if="userInfo.level_rank==index">
						当前等级
					</view>
					<view class="nowLevelBox" v-if="userInfo.level_rank>index">
						已达成
					</view>
					<view class="nowLevelBox" v-if="userInfo.level_rank<index">
						<image :src="baseUrl+'lock.png'" class="lock" />
					</view>
					<view class="progressBarBox" v-if="userInfo.level_rank<index">
						<view class="outBar">
							<view class="innerBar" :style="{ width: innerBarWidth+'%'}">
							</view>
						</view>
						<view class="integralBox1" v-if="index==4">
							<view>距离{{item.name}}会员还需<text
									class="active">{{userInfo.need_arr[index].need_integral}}</text>积分</view>
							<view><text
									class="active">{{userInfo.accumulative_integral}}</text>/{{userInfo.need_arr[index].level_integral}}
							</view>
						</view>
						<view class="integralBox" v-else>
							<view>距离{{item.name}}会员还需<text
									class="active">{{userInfo.need_arr[index].need_integral}}</text>积分</view>
							<view><text
									class="active">{{userInfo.accumulative_integral}}</text>/{{userInfo.need_arr[index].level_integral}}
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 数量盒子 -->
		<view class="numBox">
			<view class="numBoxItem" @click="$navto.navto('/bundle/pages/user_wallet/user_wallet')">
				<text class="numBoxNum">{{userInfo.user_earnings}}</text>
				<text class="numBoxLabel">余额</text>
			</view>
			<view class="numBoxItem" @click="$navto.navto('/bundle/pages/user_sign/user_sign')">
				<text class="numBoxNum">{{userInfo.user_integral}}</text>
				<text class="numBoxLabel">积分</text>
			</view>
			<view class="numBoxItem" @click="$navto.navto('/bundle/pages/coupon/coupon')">
				<text class="numBoxNum">{{userInfo.coupon}}</text>
				<text class="numBoxLabel">优惠券</text>
			</view>
			<view class="numBoxItem" @click="$navto.navto('/user/my_collection/my_collection')">
				<text class="numBoxNum">{{userInfo.collect}}</text>
				<text class="numBoxLabel">收藏</text>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="myOrderBox">
			<text class="label">我的订单</text>
			<router-link to="/pages/order_list/order_list?mode=all">
				<text class="all">全部 ></text>
			</router-link>
			<view class="myOrderMenuBox">
				<router-link to="/pages/order_list/order_list?mode=pay">
					<view class="myOrderMenu1 myOrderMenu">
						<image :src="baseUrl+'order1.png'" class="orderImg" />
						<text class="orderText">待付款</text>
						<view class="subscriptBox" v-if="userInfo.wait_pay>0">
							{{userInfo.wait_pay}}
						</view>
					</view>
				</router-link>
				<router-link to="/pages/order_list/order_list?mode=delivery">
					<view class="myOrderMenu2 myOrderMenu">
						<image :src="baseUrl+'order2.png'" class="orderImg" />
						<text class="orderText">待发货</text>
						<view class="subscriptBox" v-if="userInfo.wait_delivery>0">
							{{userInfo.wait_delivery}}
						</view>
					</view>
				</router-link>
				<router-link to="/pages/order_list/order_list?mode=take">
					<view class="myOrderMenu3 myOrderMenu">
						<image :src="baseUrl+'order3.png'" class="orderImg" />
						<text class="orderText">待收货</text>
						<view class="subscriptBox" v-if="userInfo.wait_take>0">
							{{userInfo.wait_take}}
						</view>
					</view>
				</router-link>
				<!-- <router-link to="/bundle/pages/goods_comment/goods_comment"> -->
				<view class="myOrderMenu4 myOrderMenu" @click="$navto.navto('/user/my_comment/my_comment')">
					<image :src="baseUrl+'order4.png'" class="orderImg" />
					<text class="orderText">评价</text>
					<view class="subscriptBox" v-if="userInfo.wait_comment>0">
						{{userInfo.wait_comment}}
					</view>
				</view>
				<!-- </router-link> -->
				<router-link to="/bundle/pages/after_sale/after_sale">
					<view class="myOrderMenu5 myOrderMenu">
						<image :src="baseUrl+'order5.png'" class="orderImg" />
						<text class="orderText">售后</text>
						<view class="subscriptBox" v-if="userInfo.after_sale>0">
							{{userInfo.after_sale}}
						</view>
					</view>
				</router-link>
			</view>
		</view>
		<view class="line">
		</view>
		<!-- 我的服务 -->
		<view class="myServeBox">
			<text class="label">我的服务</text>
			<view class="myServeMenuBox">
				<view class="myServeItem" @click="$navto.navto('/user/questionnaire_record/questionnaire_record')">
					<image :src="baseUrl+'my1.png'" class="serveImg" />
					<text class="serveText">我的报告</text>
					<image :src="baseUrl+'youli.png'" class="youli" />
				</view>
				<view class="myServeItem" @click="$navto.navto('/pages/address/address')">
					<image :src="baseUrl+'my2.png'" class="serveImg" />
					<text class="serveText">我的地址</text>
				</view>
				<view class="myServeItem" @click="$navto.navto('/user/my_course/my_course')">
					<image :src="baseUrl+'my3.png'" class="serveImg" />
					<text class="serveText">我的课程</text>
					<view class="subscriptBox" v-if="userInfo.user_course_count>0">
						{{userInfo.user_course_count}}
					</view>
				</view>
				<view class="myServeItem" @click="$navto.navto('/user/my_activity/my_activity')">
					<image :src="baseUrl+'my4.png'" class="serveImg" />
					<text class="serveText">我的活动</text>
					<view class="subscriptBox" v-if="userInfo.goods_activty_count>0">
						{{userInfo.goods_activty_count}}
					</view>
				</view>
				<view class="myServeItem" @click="$navto.navto('/bundle/pages/integral_mall/integral_mall')">
					<image :src="baseUrl+'my5.png'" class="serveImg" />
					<text class="serveText">积分商城</text>
				</view>
				<view class="myServeItem" @click="$navto.navto('/bundle/pages/exchange_order/exchange_order')">
					<image :src="baseUrl+'my14.png'" class="serveImg" />
					<text class="serveText">兑换订单</text>
				</view>
				<!-- <view class="myServeItem" @click="application()">
					<image :src="baseUrl+'my6.png'" class="serveImg" />
					<text class="serveText">分销中心</text>
				</view> -->
				<view class="myServeItem" v-if="userInfo.agent_status==1" @click="$navto.navto('/user/channel_center/channel_center')">
					<image :src="baseUrl+'my13.png'" class="serveImg" />
					<text class="serveText">渠道中心</text>
				</view>
				<view class="myServeItem" @click="$navto.navto('/user/purchase_notice/purchase_notice')">
					<image :src="baseUrl+'my7.png'" class="serveImg" />
					<text class="serveText">购买须知</text>
				</view>
				<view class="myServeItem" @click="$navto.navto('/user/directions/directions')">
					<image :src="baseUrl+'my8.png'" class="serveImg" />
					<text class="serveText">服用说明</text>
				</view>
				<view class="myServeItem" @click="$navto.navto('/user/feedback/feedback')">
					<image :src="baseUrl+'my9.png'" class="serveImg" />
					<text class="serveText">意见反馈</text>
				</view>
				<view class="myServeItem" @click="$openCuster()">
					<image :src="baseUrl+'my10.png'" class="serveImg" />
					<text class="serveText">联系客服</text>
				</view>
				<view class="myServeItem" @click="$navto.navto('/user/cooperate/cooperate')">
					<image :src="baseUrl+'my11.png'" class="serveImg" />
					<text class="serveText">商务合作</text>
				</view>
				<view class="myServeItem" @click="$navto.navto('/user/aboutus/aboutus')">
					<image :src="baseUrl+'my12.png'" class="serveImg" />
					<text class="serveText">关于我们</text>
				</view>
			</view>
		</view>
		<!-- 海报 -->
		<view class="posterBox" v-if="posterSwiper.isPoster==1">
			<view class="posterInnerBox">
				<text class="posterTitle">选择海报样式</text>
				<!-- 海报轮播 -->
				<uni-swiper-dot :info="posterSwiper.posterArr" :current="posterSwiper.current" :mode="posterSwiper.mode"
					:dots-styles="posterSwiper.dotsStyles">
					<swiper class="posterSwiperBox" next-margin="10px" @change=changePoster :current='current'>
						<swiper-item class="swiper-item" v-for="(item,index) in posterSwiper.posterArr" :key="index">
							<image :src="baseUrl+item.bg" class="poster" />
							<image :src="qrcodeUrl" class="qrcode" />
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
				<view class="saveBtn" @click="save">
					保存海报
				</view>
			</view>
			<image :src="baseUrl+'close.png'" class="closePoster" @click="closePoster" />
		</view>
		<poster ref="poster" :list="list" background-color="#FFF" :width="561" :height="833" @on-success="posterSuccess"
			@on-error="posterError"></poster>
		<!-- <tabbar /> -->
	</view>
</template>

<script>
	import {
		baseURL,
		basePath
	} from '@/config/app'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import Poster from '@/components/zhangyuhao-poster/Poster.vue'
	export default {
		components: {
			Poster
		},
		data() {
			return {
				baseUrl: `https://cdn.zkjialan.com/img/user/`,
				innerBarWidth: 0,
				posterSwiper: {
					posterArr: [{
							bg: 'poster1.png',
						},
						{
							bg: 'poster2.png',
						},
						{
							bg: 'poster3.png',
						}
					],
					current: 0,
					mode: 'round',
					dotsStyles: {
						bottom: 10,
						border: '1px rgba(255, 255, 255, 1) solid',
						backgroundColor: 'grey',
						selectedBackgroundColor: '#000000',
						selectedBorder: '1px rgba(255, 255, 255, 1) solid'
					},
					isPoster: 0
				},
				poster: '',
				posterSave: '',
				qrcodeUrl: '',
				list: [],
				levelIndex: 0,
				levelArr: [ //轮播数据
					{
						bg: 'bg1-2.png',
						levelbg: 'bg1-1.png',
						name: '注册会员'
					},
					{
						bg: 'bg2-2.png',
						levelbg: 'bg2-1.png',
						name: '黄金'
					},
					{
						bg: 'bg3-2.png',
						levelbg: 'bg3-1.png',
						name: '铂金'
					},
					{
						bg: 'bg4-2.png',
						levelbg: 'bg4-1.png',
						name: '钻石'
					},
					{
						bg: 'bg5-2.png',
						levelbg: 'bg5-1.png',
						name: '黑钻'
					},
					{
						bg: 'bg6-2.png',
						levelbg: 'bg6-1.png',
						name: 'CHO'
					}
				],
				isApplication: 0 //是否申请成为分销商
			}
		},
		methods: {
			scan() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						uni.navigateTo({
							url: `/user/verification/verification?id=${res.result}`
						});
					}
				});
			},
			...mapActions(['getUser']),
			closePoster() {
				this.posterSwiper.isPoster = 0;
			},
			posterError(err) {
			},
			posterSuccess(url) {
				// 生成成功，会把临时路径在这里返回
				this.poster = url;
				uni.saveImageToPhotosAlbum({
					filePath: this.poster,
					success: res => {
						this.$toast({
							title: '保存成功'
						})
					}
				});
			},
			save() {
				setTimeout(() => {
					// 赋值需要渲染的信息
					this.list = [{
							type: 'image',
							path: this.baseUrl + this.posterSwiper.posterArr[this.posterSwiper.current].bg,
							x: 0,
							y: 0,
							width: 561,
							height: 833
						},
						{
							type: 'image',
							// path替换成你自己的图片，注意需要在小程序开发设置中配置域名
							path: this.qrcodeUrl,
							x: 388,
							y: 680,
							width: 128,
							height: 128,
							shape: 'circle'
						}
					];
					// 生成图片
					this.$nextTick(() => {
						// 要放在$nextTick()里，不然会空白
						this.$refs.poster.create();
					})
				}, 1000)
			},
			changeSwiper(e) {
				this.levelIndex = e.detail.current;
				//计算进度条
				this.innerBarWidth = this.userInfo.accumulative_integral / (this.userInfo.need_arr[this.levelIndex]
					.need_integral + this.userInfo.accumulative_integral) * 100
			},
			changePoster(e) {
				this.posterSwiper.current = e.detail.current;
			},
			application() {
				// isApplication==1?posterSwiper.isPoster==1 :
				//分销申请
				this.$request.get(`shopapi/Distribution/applyDetail`).then(res => {
					if (res.data.code == 1) { //已提交
						if (res.data.data.status == 1) { //审核通过查询海报
							uni.showLoading({
								title: '海报生成中...'
							});
							this.$request.post(`shopapi/Distribution/poster`, {
								url: 'pages/index/index',
							}).then(res => { //显示海报
								this.posterSwiper.isPoster = 1;
								this.qrcodeUrl = res.data.data.url;
								console.log(res.data);
								uni.hideLoading();
							})
						} else if (res.data.data.status == 0) {
							this.$toast({
								title: res.data.data.status_tips
							})
						} else {
							uni.navigateTo({
								url: '/user/distribution_application/distribution_application'
							});
						}
					} else {
						uni.navigateTo({
							url: '/user/distribution_application/distribution_application'
						});
					}
				})
			}
		},
		computed: {},
		onLoad() {},
		onShow() {
			if (!this.isLogin) return this.$Router.push('/pages/login/login');
			this.getUser().then(user => {
				this.levelIndex = user.level_rank
			}).catch(error => {
			});
		}
	}
</script>

<style lang="scss">
	.white{
		color:#fff
	}
	.posterBox {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 99999999;
		background-color: rgba(0, 0, 0, 0.6);
		overflow-y: scroll;

		.closePoster {
			width: 58rpx;
			height: 58rpx;
			margin-top: 42rpx;
			margin-left: 346rpx;
			margin-bottom: 40rpx;
		}

		.posterInnerBox {
			.saveBtn {
				position: relative;
				width: 338rpx;
				height: 84rpx;
				line-height: 84rpx;
				background-color: #f08329;
				text-align: center;
				font-size: 27rpx;
				font-family: 'am';
				margin-top: 15rpx;
				margin-left: 170rpx;
				border-radius: 42rpx;
				color: #fff;

			}

			.posterSwiperBox {
				position: relative;
				width: 620rpx;
				height: 876rpx;
				// margin-left: 40rpx;
				margin-top: 60rpx;
				margin-left: 55rpx;

				.swiper-item {
					width: 570rpx !important;
					height: 833rpx !important;
					border-radius: 15rpx;
					margin-right: 30rpx;
					display: flex;
					justify-content: center;

					.poster {
						width: 570rpx;
						height: 833rpx;
					}

					.qrcode {
						position: absolute;
						width: 128rpx;
						height: 128rpx;
						top: 680rpx;
						left: 395rpx;
						border-radius: 50%;
					}
				}
			}

			.posterTitle {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				font-family: 'am';
				display: block;
			}

			width: 670rpx;
			height: 1160rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 175rpx;
			margin-left: 40rpx;
			padding-top: 40rpx;
		}
	}

	.myServeBox {
		position: relative;
		width: 674rpx;
		height: 740rpx;
		margin-top: 80rpx;
		margin-left: 39rpx;
		margin-bottom: 80rpx;

		.label {
			font-size: 28rpx;
			font-family: 'am';
		}

		.myServeMenuBox {
			width: 674rpx;
			margin-top: 95rpx;
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;

			.myServeItem {
				position: relative;
				width: 150rpx;
				height: 120rpx;
				margin-bottom: 80rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				margin-right: 19rpx;

				.youli {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					width: 75rpx;
					height: 30rpx;
				}

				.serveImg {
					width: 71rpx;
					height: 59rpx;
				}

				.serveText {
					text-align: center;
					font-size: 24rpx;
					font-family: 'am';
				}

				.subscriptBox {
					top: -5rpx;
					right: 20rpx;
					position: absolute;
					padding: 8rpx;
					border-radius: 50%;
					background-color: red;
					font-size: 17rpx;
					color: #fff;
					height: 30rpx;
					width: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.line {
		width: 674rpx;
		height: 1rpx;
		margin-left: 39rpx;
		background-color: #dcdcdc;
		margin-top: 80rpx;
	}

	.myOrderBox {
		position: relative;
		width: 674rpx;
		height: 198rpx;
		margin-top: 80rpx;
		margin-left: 39rpx;

		.myOrderMenuBox {
			width: 100%;
			height: 96rpx;
			margin-top: 75rpx;
			display: flex;

			.myOrderMenu {
				position: relative;
				// width: 60rpx;
				height: 100%;
				margin-left: 35rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;

				// background-color: red;
				.orderImg {
					width: 44rpx;
					height: 37rpx;
				}

				.orderText {
					text-align: center;
					font-size: 23rpx;
					font-family: 'am';
					margin-top: 30rpx;
				}

				.subscriptBox {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					padding: 8rpx;
					border-radius: 50%;
					background-color: red;
					font-size: 17rpx;
					color: #fff;
					height: 30rpx;
					width: 30rpx;
					/* text-align: center; */
					display: flex;
					/* line-height: 35rpx; */
					align-items: center;
					justify-content: center;
				}
			}

			.myOrderMenu1 {
				margin-left: 35rpx;
			}

			.myOrderMenu2 {
				margin-left: 75rpx;
			}

			.myOrderMenu3 {
				margin-left: 75rpx;
			}

			.myOrderMenu4 {
				margin-left: 75rpx;
			}

			.myOrderMenu5 {
				margin-left: 75rpx;
			}
		}

		.label {
			font-size: 28rpx;
			font-family: 'am';
		}

		.all {
			position: absolute;
			font-size: 20rpx;
			font-family: 'ar';
			color: #8e8e8e;
			right: 39rpx;
			top: 0;
		}
	}

	.numBox {
		width: 100%;
		height: 80rpx;
		margin-top: 70rpx;
		display: flex;
		justify-content: space-around;

		.numBoxItem {
			width: 25%;
			height: 80rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			text-align: center;

			.numBoxNum {
				font-size: 44rpx;
				font-family: 'am';

			}

			.numBoxLabel {
				font-size: 22rpx;
				font-family: 'ar';
				color: #8e8e8e;
			}
		}
	}

	.userBox {
		position: relative;
		width: 100%;
		height: 654rpx;

		.swiperBox {
			position: absolute;
			width: 710rpx;
			height: 603rpx;
			bottom: 0;
			left: 40rpx;

			.integralBox {
				width: 100%;
				font-size: 20rpx;
				font-family: 'ar';
				display: flex;
				margin-top: 20rpx;
				justify-content: space-between;
				letter-spacing: 2rpx;

				.active {
					color: #f08329;
				}
			}

			.integralBox1 {
				width: 100%;
				font-size: 20rpx;
				font-family: 'ar';
				display: flex;
				margin-top: 20rpx;
				justify-content: space-between;
				letter-spacing: 2rpx;
				color: #fff;

				.active {
					color: #f08329;
				}
			}

			.progressBarBox {
				position: absolute;
				width: 600rpx;
				top: 510rpx;
				margin-left: 40rpx;

				.outBar {
					width: 100%;
					height: 10rpx;
					background-color: #f6f6f6;
					border-radius: 10rpx;

					.innerBar {
						width: 0%;
						height: 100%;
						background-color: #f08329;
						border-radius: 10rpx;
					}
				}
			}

			.nowLevelBox {
				position: absolute;
				width: 100rpx;
				height: 38rpx;
				left: 0;
				top: 335rpx;
				// background-color: red;
				font-size: 18rpx;
				font-family: 'ar';
				text-align: center;
				line-height: 38rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.lock {
					width: 75rpx;
					height: 20rpx;
				}
			}

			.swiper-item,
			.itemImg {
				position: relative;
				width: 674rpx;
				height: 100%;
			}
		}

		.levelBg {
			position: absolute;
			width: 100%;
			height: 520rpx;
			top: 0;
		}

		.userInfoBox {
			position: absolute;
			width: 712rpx;
			height: 126rpx;
			left: 38rpx;
			top: 210rpx;

			.avatar {
				position: absolute;
				width: 126rpx;
				height: 126rpx;
				top: 0;
				left: 0;
				z-index: 9999;
				border-radius: 50%;
				border: 1rpx solid #f08329;
			}

			.name {
				position: absolute;
				font-size: 36rpx;
				left: 162rpx;
				top: 20rpx;
				font-family: 'ab';
			}

			.mobile {
				position: absolute;
				font-size: 22rpx;
				font-family: 'ar';
				left: 162rpx;
				top: 80rpx;
			}

			.scan {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				right: 200rpx;
				top: 22rpx;
				z-index: 999999999;
			}

			.centerBox {
				position: absolute;
				right: 0;
				top: 26rpx;
				width: 122rpx;
				height: 50rpx;
				background-color: #000000;
				border-radius: 25rpx 0 0 25rpx;
				font-size: 20rpx;
				font-family: 'ar';
				color: #fff;
				text-align: center;
				line-height: 50rpx;
				z-index: 999999;
			}
		}
	}

	.content {
		position: relative;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: scroll;
	}

	/deep/ page {
		width: 100%;
		height: 100%;
		background-color: #fff !important;
		overflow-y: scroll;
		padding-bottom: 0 !important;
	}
</style>